<!DOCTYPE html>
<html>
<head>
    <title>需求管理</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <!-- 添加状态筛选按钮组 -->
    <div class="filter-buttons">
        <button class="filter-btn active" data-state="0">待处理</button>
        <button class="filter-btn" data-state="1">已完成</button>
        <button class="filter-btn" data-state="9">已跳过</button>
        <button class="filter-btn" data-state="all">全部</button>
    </div>

    <table id="dataTable" class="display">
        <thead>
            <tr>
                <!-- <th>标题</th>
                <th>内容</th> -->
                <th>需求</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>

    <!-- 详情模态框 -->
    <div id="detailModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="modalContent"></div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 初始化 DataTable 时添加状态过滤
            var table = $('#dataTable').DataTable({
                ajax: {
                    url: '/get_data',
                    dataSrc: 'data',
                    data: function(d) {
                        // 获取当前选中的状态过滤值
                        var activeState = $('.filter-btn.active').data('state');
                        if (activeState !== 'all') {
                            d.state = activeState;
                        }
                        return d;
                    },
                    error: function (xhr, error, thrown) {
                        console.log('Ajax 错误:', error);
                        console.log('详细信息:', thrown);
                        console.log('响应:', xhr.responseText);
                    }
                },
                columns: [
                    // { data: 'title_cn' },
                    // { data: 'content_cn' },
                    { 
                        data: 'requirement',
                        width: '80%',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                return marked.parse(data);
                            }
                            return data;
                        }
                    },
                    { 
                        data: 'state',
                        width: '10%',
                        render: function(data, type, row) {
                            const stateMap = {
                                '0': '待处理',
                                '1': '已完成',
                                '9': '已跳过'
                            };
                            return stateMap[data] || data;
                        }
                    },
                    {
                        data: null,
                        width: '10%',
                        render: function(data, type, row) {
                            const isProcessed = row.state === '1' || row.state === '9';
                            return `
                                <button onclick="showDetails(${row.id})" class="btn-detail">详情</button>
                                <button onclick="updateState(${row.id}, '1')" class="btn-done" ${isProcessed ? 'disabled' : ''}>
                                    ${row.state === '1' ? '已完成' : '完成'}
                                </button>
                                <button onclick="updateState(${row.id}, '9')" class="btn-skip" ${isProcessed ? 'disabled' : ''}>
                                    ${row.state === '9' ? '已跳过' : '跳过'}
                                </button>
                            `;
                        }
                    }
                ],
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/zh.json'
                },
                "createdRow": function(row, data, dataIndex) {
                    $('td:eq(0)', row).addClass('markdown-cell');
                }
            });

            // 全局变量存储表格实例
            window.dataTable = table;

            // 状态筛选按钮点击事件
            $('.filter-btn').click(function() {
                $('.filter-btn').removeClass('active');
                $(this).addClass('active');
                table.ajax.reload();
            });
        });

        function updateState(id, state) {
            const stateText = state === '1' ? '完成' : '跳过';
            if (confirm(`确定要将此需求标记为${stateText}吗？`)) {
                $.ajax({
                    url: '/update_state',
                    method: 'POST',
                    data: { 
                        id: id,
                        state: state
                    },
                    success: function(response) {
                        if (response.success) {
                            // 立即刷新表格数据
                            window.dataTable.ajax.reload(null, false);
                            
                            // 如果当前有打开的详情模态框，也更新模态框中的内容
                            if ($('#detailModal').is(':visible')) {
                                refreshModalContent(id);
                            }
                        } else {
                            alert('操作失败：' + response.error);
                        }
                    },
                    error: function() {
                        alert('操作失败，请稍后重试');
                    }
                });
            }
        }

        function refreshModalContent(id) {
            $.ajax({
                url: '/get_data',
                data: { id: id },
                success: function(response) {
                    var record = response.data.find(item => item.id === id);
                    if (record) {
                        const stateMap = {
                            '0': '待处理',
                            '1': '已完成',
                            '9': '已跳过'
                        };
                        var content = `
                            <div class="requirement-section">
                                <h4>需求：</h4>
                                <div class="markdown-content">${marked.parse(record.requirement)}</div>
                            </div>
                            <p>状态：${stateMap[record.state] || record.state}</p>
                        `;
                        $('#modalContent').html(content);
                    }
                }
            });
        }

        function showDetails(id) {
            $.ajax({
                url: '/get_data',
                data: { id: id },
                success: function(response) {
                    var record = response.data.find(item => item.id === id);
                    if (record) {
                        const stateMap = {
                            '0': '待处理',
                            '1': '已完成',
                            '9': '已跳过'
                        };
                        var content = `
                            <div class="requirement-section">
                                <h4>需求：</h4>
                                <div class="markdown-content">${marked.parse(record.requirement)}</div>
                            </div>
                            <p>状态：${stateMap[record.state] || record.state}</p>
                        `;
                        $('#modalContent').html(content);
                        $('#detailModal').show();
                    }
                }
            });
        }

        // 关闭模态框
        $('.close').click(function() {
            $('#detailModal').hide();
        });

        // 点击模态框外部关闭
        $(window).click(function(event) {
            if ($(event.target).is('#detailModal')) {
                $('#detailModal').hide();
            }
        });
    </script>

    <style>
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            z-index: 1000;
            overflow-y: auto;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 30px auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 800px;
            position: relative;
            max-height: calc(100vh - 60px);
            overflow-y: auto;
        }
        .close {
            position: sticky;
            top: 0;
            float: right;
            cursor: pointer;
            font-size: 28px;
            z-index: 1001;
            background-color: #fefefe;
            padding: 0 10px;
        }
        .close:hover {
            color: #666;
        }
        #modalContent {
            margin-top: 20px;
            overflow-y: visible;
        }
        .markdown-content {
            overflow-wrap: break-word;
            word-wrap: break-word;
            hyphens: auto;
        }
        .markdown-content pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .markdown-content table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        #dataTable {
            width: 100%;
            margin: 20px 0;
        }
        button {
            padding: 5px 10px;
            cursor: pointer;
        }
        .markdown-cell {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .markdown-cell p {
            margin: 0;
        }
        .markdown-cell ul, .markdown-cell ol {
            margin: 5px 0;
            padding-left: 20px;
        }
        .requirement-section {
            margin: 20px 0;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }
        .requirement-section h4 {
            margin-bottom: 10px;
            color: #333;
        }
        .markdown-content h1,
        .markdown-content h2,
        .markdown-content h3,
        .markdown-content h4,
        .markdown-content h5,
        .markdown-content h6 {
            margin-top: 1em;
            margin-bottom: 0.5em;
        }
        .markdown-content ul,
        .markdown-content ol {
            padding-left: 20px;
            margin: 10px 0;
        }
        .markdown-content li {
            margin: 5px 0;
        }
        .markdown-content p {
            margin: 10px 0;
        }
        .markdown-content blockquote {
            border-left: 4px solid #ddd;
            padding-left: 15px;
            margin: 10px 0;
            color: #666;
        }
        .markdown-content code {
            background-color: #f0f0f0;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: monospace;
        }
        .markdown-content pre {
            background-color: #f0f0f0;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            margin: 15px 0;
        }
        .markdown-content pre code {
            background-color: transparent;
            padding: 0;
        }
        .markdown-content a {
            color: #0366d6;
            text-decoration: none;
        }
        .markdown-content a:hover {
            text-decoration: underline;
        }
        .markdown-content img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 15px 0;
        }
        
        /* 按钮样式 */
        .btn-detail, .btn-done, .btn-skip {
            padding: 5px 10px;
            margin: 2px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.3s;
        }

        .btn-detail {
            background-color: #4CAF50;
            color: white;
        }

        .btn-detail:hover {
            background-color: #45a049;
        }

        .btn-done {
            background-color: #2196F3;
            color: white;
        }

        .btn-done:hover {
            background-color: #1976D2;
        }

        .btn-skip {
            background-color: #FF9800;
            color: white;
        }

        .btn-skip:hover {
            background-color: #F57C00;
        }

        .btn-done[disabled], .btn-skip[disabled] {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        /* 表格列宽样式 */
        #dataTable {
            table-layout: fixed;
            width: 100%;
        }

        .markdown-cell {
            width: 80%;
            padding: 10px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* 状态筛选按钮样式 */
        .filter-buttons {
            margin: 20px 0;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }

        .filter-btn {
            padding: 8px 16px;
            margin: 0 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-btn:hover {
            background-color: #e9ecef;
        }

        .filter-btn.active {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }

        /* 状态显示样式 */
        .status-pending {
            color: #ffc107;
        }

        .status-done {
            color: #28a745;
        }

        .status-skipped {
            color: #6c757d;
        }
    </style>
</body>
</html>